Table 表格

• <table>
  • <tr>：代表 (table row)，橫的 row
  • <td>：代表 (table data)，直的
  • <th>：代表 (table heading)：代表表頭，會顯示粗體
• 先使用 <table>，之後使用 <tr>，再使用 <th> or <td>
• CSS 屬性
  • border-collapse：預設值為 separate ，代表表格的邊框彼此分開，因此改設定 collapse，代表合併為一個邊框

HTML

<table class="price">
    <tr>
        <th>標題 1</th>
        <th>標題 2</th>
        <th>標題 3</th>
    </tr>
    <tr>
        <td>內容 1</td>
        <td>內容 2</td>
        <td>內容 3</td>
    </tr>
    <!-- <tr>
        <td colspan="2">合併 1</td>
        <td rowspan="2">合併 2</td>
    </tr>
    <tr>
        <td>內容 1</td>
        <td>內容 2</td>
    </tr> -->
</table>

CSS

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.price th ,.price td{
    border: 1px solid #000;
}

.price th {
    padding: 10px;
}

呈現結果如下，如果呈現不同，可能未 CSS Reset

將註解部分解除，有合併之顯示結果如下

參考資料

• CSS border-collapse 屬性
• CSS border-spacing 屬性

次回

預計說明 HTML 的表單